<template>
	<div class="paramslist">
		<div class="search">
			<el-row style="text-align: left;margin-bottom: 10px;">
				<el-button>刷新</el-button>
				<el-button type="primary">新增</el-button>
			</el-row>
			<div class="searchbtn">
				<el-form :inline="true" :model="newparamslist" class="demo-form-inline" ref="searchform">
					<el-form-item prop="name">
						<el-input v-model="newparamslist.name" placeholder="请输入关键字"></el-input>
					</el-form-item>
				</el-form>
				<el-button type="primary" @click="getParamsList()" style="height: 40px;">搜索</el-button>
			</div>
		</div>
		<el-table :data="paramslist" border style="width: 100%" class="table">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="name" label="名称"></el-table-column>
			<el-table-column prop="keyName" label="keyName"></el-table-column>
			<el-table-column prop="data" label="数据"></el-table-column>
			<el-table-column prop="remark" label="备注"></el-table-column>
			<!-- </el-table-column> -->
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button @click.native.prevent="toEdit(scope)" type="text" size="medium">
						编辑
					</el-button>
					<el-button @click.native.prevent="deleteRow(scope.$index, rolelist)" type="text" size="medium">
						移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
			:page-sizes="[20, 40, 60, 100]" :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
			</el-pagination>
		</div>
		
		
		<el-dialog title="修改数据" :visible.sync="noteVisible" width="50%">
			<textarea cols="30" rows="10" v-model="tempNote"></textarea><br>
			<el-button @click="noteVisible=false">取消</el-button>
			<el-button @click="sureEdit">确定</el-button>
		</el-dialog>
	</div>
</template>

<script>
export default{
	data(){
		return{
			noteVisible: false,
			tempNote:"",
			paramslist:[
				{
					createTime: "2021-02-26 13:53:18",
					data: "{\n    code: 111\n}",
					dataType: 0,
					id: 2,
					keyName: "json",
					name: "JSON参数",
					remark: null,
					updateTime: "2021-02-26 13:53:18",
				},
				{
					createTime: "2021-02-26 13:53:05",
					data: "<p><strong class=\"ql-size-huge\">111xxxxx2222<span class=\"ql-cursor\">﻿﻿</span></strong></p>",
					dataType: 0,
					id: 1,
					keyName: "text",
					name: "富文本参数",
					remark: null,
					updateTime: "2021-03-03 17:50:04",
				}
			],
			pagination:{
				page: 1,
				size: 20,
				total: 2,
			},
			newparamslist:{
				createTime: "",
				data: "",
				dataType: null,
				id:null,
				keyName: "",
				name: "",
				remark: null,
				updateTime: "",
			}
		}
	},
	methods:{
		handleSizeChange(val) {
			this.pagination.size = val;
		},
		handleCurrentChange(val) {
			this.pagination.currentPage = val;
		},
		getParamsList() {
			console.log("paramslist");
		},
		deleteRow(index, rows) {
			rows.splice(index, 1);
		},
		toEdit(scope) {
			//确定编辑的行
			this.editRow = { ...scope.row};
			//显示编辑框
			this.noteVisible = true;
			//当前临时被编辑的文本
			this.tempNote = scope.row.note;
			//被编辑的行
			this.editIndex = scope.$next;
			// console.log("scope.$next",scope)
		},
		sureEdit() {
			alert("修改成功");
			this.noteVisible = false;
		}
	}
}
</script>

<style lang="scss">
.paramslist {
		background-color: #fff;
		width: 100%;
		height: 100vh;
		text-align: center;
		padding: 30px;

		.search {
			display: flex;
			justify-content: space-between;

			.searchbtn {
				display: flex;
				justify-content: space-between;
			}
		}

		.table {
			font-size: 18px;
		}
		.pagination{
			text-align: right;
			margin-top: 10px;
			font-size: 26px;
		}
	}
</style>